import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';

export const pickColorStyle = style({
	borderSpacing: '0.6em',
	margin: '0 0.5em',
});

globalStyle(`${pickColorStyle} tr`, {
	height: '1em',
});

globalStyle(`${pickColorStyle} td`, {
	textAlign: 'center',
	width: '2em',
	border: `1px solid ${vars.color.lightBorder}`,
	cursor: 'default',
});

globalStyle(`${pickColorStyle} td:hover,${pickColorStyle} td:focus`, {
	outline: `1px solid ${vars.color.darkBorder}`,
	outlineOffset: '2px',
});
